<template>
  <div class="commen-container">
    <h1>网站字典管理</h1>
    <div class="commen-header">
      <div class="header-block ">
        <el-input
          placeholder="请输入要搜索的字典名称"
          v-model="formData.name" size="10">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <el-input
          placeholder="请输入要搜索的字典值"
          v-model="formData.enum_value" size="10">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <div>
          <el-button type="primary" size="normal" icon="el-icon-search" @click="handleSearch">
            搜索
          </el-button>
          <el-button size="normal" icon="el-icon-refresh" @click="handleClear">
            重置
          </el-button>
        </div>
      </div>
      <div>
        <el-button type="danger" size="normal" icon="el-icon-delete-solid" @click="handleBatchDelete">
          批量删除
        </el-button>
        <el-button type="success" size="normal" icon="el-icon-circle-plus" @click="handleAdd">
          新增
        </el-button>
      </div>
      <div v-if="!tableData || tableData.length < 1" class="juzhong">
        <span><i class="el-icon-loading"></i>
        加载中</span>
        <el-divider></el-divider>
      </div>
      <div v-else class="post-table">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          border>
          <el-table-column
            type="selection"
            width="80"
            align="center"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="enum_id"
            label="字典id"
            min-width="50"
            align="center"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            style="color: #20a0ff"
            label="字典名称"
            min-width="100"
            align="center"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="enum_key"
            label="字典key"
            min-width="100"
            align="center"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="enum_value"
            label="字典值"
            min-width="100"
            align="center"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="create_time"
            label="创建时间"
            min-width="100"
            align="center"
            header-align="center"
          ></el-table-column>
          <el-table-column
            prop="remark"
            label="备注"
            min-width="100"
            align="center"
            header-align="center"
          >
          </el-table-column>
          <el-table-column label="操作" align="center"
                           header-align="center"
                           min-width="150">
            <template slot-scope="scope">
              <div class="juzhong" style="flex-direction: row">
                <el-button size="small" @click="confirmDelete(scope.row)">删除</el-button>
                <el-button type="primary" size="small" @click="handleEdit(scope.row)">修改</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-divider></el-divider>
      <div class="juzhong">
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="formData.pageNum"
            :page-sizes="[10, 50, 100, 150]"
            :page-size="formData.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </div>
      <!-- 修改弹窗 -->
      <el-dialog
        title="修改字典信息"
        :visible.sync="editDialogVisible"
        width="500px">
        <el-form :model="editForm" label-width="80px">
          <el-form-item label="字典名称">
            <el-input v-model="editForm.name"></el-input>
          </el-form-item>
          <el-form-item label="字典key">
            <el-input v-model="editForm.enum_key"></el-input>
          </el-form-item>
          <el-form-item label="字典值">
            <el-input v-model="editForm.enum_value"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="editForm.remark"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleUpdate">确定</el-button>
        </div>
      </el-dialog>
      <!-- 新增弹窗 -->
      <el-dialog
        title="新增字典信息"
        :visible.sync="addDialogVisible"
        width="500px">
        <el-form :model="addForm" label-width="80px">
          <el-form-item label="字典名称">
            <el-input v-model="addForm.name"></el-input>
          </el-form-item>
          <el-form-item label="字典key">
            <el-input v-model="addForm.enum_key"></el-input>
          </el-form-item>
          <el-form-item label="字典值">
            <el-input v-model="addForm.enum_value"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="addForm.remark"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleCreate">确定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {Message, MessageBox} from "element-ui";
import {getDictEnumList, deleteDictEnum, createadnUpdateDictEnum} from "@/api/commen";

export default {
  name: 'Student',
  data() {
    return {
      total: null,
      tableData: null,
      formData: {
        pageSize: 10,
        pageNum: 1,
        enum_value: null,
        name: null,
      },
      times: [],
      editDialogVisible: false,
      editForm: {
        enum_id: null,
        name: '',
        enum_key: '',
        enum_value: '',
        remark: ''
      },
      addDialogVisible: false,
      addForm: {
        name: '',
        enum_key: '',
        enum_value: '',
        remark: ''
      }
    }
  },
  methods: {
    //处理时间
    handleTimes(val) {
      if (val && val.length === 2) {
        const formattedTimes = val.map(date => this.formatDate(date));
        this.formData.start_time = formattedTimes[0];
        this.formData.end_time = formattedTimes[1];
      } else {
        this.formData.start_time = null;
        this.formData.end_time = null;
      }
    },
    //转换时间格式
    formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    ClearPage() {
      this.formData = {};
    },
    handleClear() {
      this.ClearPage();
      this.fetchTable();
    },
    handleSizeChange(val) {
      this.formData.pageSize = val;
      this.fetchTable();
    },
    handleCurrentChange(val) {
      this.formData.pageNum = val;
      this.fetchTable();
    },
    async fetchTable() {
      try {
        const rep = await getDictEnumList(this.formData);
        this.tableData = rep.items;
        this.total = rep.total;
      } catch (e) {
        console.log(e);
        Message.warning("查询无效！");
      }
    },
    handleSearch() {
      console.log(this.formData);
      this.fetchTable();
    },
    handleEdit(row) {
      this.editDialogVisible = true;
      this.editForm.enum_id = row.enum_id;
      this.editForm.name = row.name;
      this.editForm.enum_key = row.enum_key;
      this.editForm.enum_value = row.enum_value;
      this.editForm.remark = row.remark;
    },
    async handleUpdate() {
      try {
        await createadnUpdateDictEnum(this.editForm);
        Message.success('修改成功');
        this.editDialogVisible = false;
        await this.fetchTable();
      } catch (e) {
        console.log(e);
        Message.warning('修改失败');
      }
    },
    handleAdd() {
      this.addDialogVisible = true;
      this.addForm = {
        name: '',
        enum_key: '',
        enum_value: '',
        remark: ''
      };
    },
    async handleCreate() {
      try {
        await createadnUpdateDictEnum(this.addForm);
        Message.success('新增成功');
        this.addDialogVisible = false;
        await this.fetchTable();
      } catch (e) {
        console.log(e);
        Message.warning('新增失败');
      }
    },
    async confirmDelete(row) {
      MessageBox.confirm('确定要删除该记录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return this.handleDelete(row);
      }).then(() => {
        Message.success('删除成功');
      }).catch(() => {
        Message.info('已取消删除');
      });
    },
    async handleDelete(row) {
      try {
        await deleteDictEnum(row.enum_id);
        this.handleClear()
      } catch (e) {
        console.log(e);
        Message.warning('删除失败');
      }
    },
    async handleBatchDelete() {
      const selection = this.$refs.multipleTable.selection;
      if (selection.length === 0) {
        Message.warning('请选择要删除的记录');
        return;
      }
      MessageBox.confirm('确定要批量删除选中的记录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const ids = selection.map(row => row.enum_id);
        return this.deleteDictEnumBatch(ids);
      }).then(() => {
        Message.success('批量删除成功');
        this.handleClear()
      }).catch(() => {
        Message.info('已取消批量删除');
      });
    },
    async deleteDictEnumBatch(ids) {
      try {
        await deleteDictEnum(ids);
      } catch (e) {
        console.log(e);
        Message.warning('批量删除失败');
      }
    }
  },
  mounted() {
    this.fetchTable()
  }
}
</script>

<style scoped>

</style>
